<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>欢迎YY来到千锋</h1>

    <p>
        <span>序号</span>
        <span>用户名</span>
        <span>密码</span>
    </p>

    <ul>
        <!-- <li>
            <span>1</span>
            <span>yy</span>
            <span>123</span>
        </li> -->
    </ul>

    <script src="./tools.js"></script>


    <script>
        let oH1 = document.querySelector('h1');
        let username = getCookie('LOGIN_USER');
        oH1.innerHTML = `欢迎${username}来到千锋`


        let arr = getCookies();
        console.log(arr);
        arr = arr.filter( v => v.name.includes('YYDS_')) ;

        let html = '';
        arr.forEach((v , i) => {
            let {name,content} = v;
            let user = name.replace('YYDS_' , '') ;
            html += `
            <li>
                <span>${i + 1}</span>
                <span>${user}</span>
                <span>${content}</span>
                <span onclick="fn2('${name}' ,this)">修改密码</span>
                <span onclick="fn('${name}' , this)">删除</span>
            </li>
            `
        });
        const oUl = document.querySelector('ul') ;
        oUl.innerHTML = html ;




        function fn(name , _this) {
            removeCookie(name) ;
            // 不要刷新页面
            // 删除li
            _this.parentElement.remove() ;
        }


        // 出现弹窗
        function fn2(name , _this) {
            const res = prompt('输入新的密码') ;
            console.log(res);
            if(res) {
                setCookie(name , res) ;
                // 不能刷新页面
                _this.previousElementSibling.innerHTML = res ;
            }
        }

       
    </script>
</body>
</html>